Image Zoom Tutorial Setup: Before we begin, we need to install the Image Zoom module from the given link below: http://drupal.org/project/imagezoom and choose an image we would like to use.
Module Installation:
1. Copy the link address(as shown above) and go to Module> Install new module> Insert copied link address into the ‘Install from a URL’ bar> Click Install.
2. Enable Image Zoom module> Save configuration. 3. Next we need to create a new content type, view and add the content. To create new content type navigate to Structure>Content Types>Add Content Type. Fill in the Name and Title Field Label. Un-click 'promoted to front page' under Publishing Options, 'display author date and information' under Display Settings and set 'Default comment setting for new content' to Hidden. Save and Add Fields. 4. Now we need to add the Image field under Manage Fields. Add new field Label: Image Machine Name: field_imagezoom Field: Image Widget: Image
On the next two screens just click on 'Save field settings/Save settings' (We don't need to change any settings). 5. You will be led back to the Manage Fields settings. Click on the Manage Display tab on the top right corner. Select 'Image Zoom' under Image Format. To the right you will then see a button to click where you can change the image style. It is automatically set to: Display image style: original Zoomed image style: original Set your Display image style and Zoomed image style. In this example we will set Display image style to medium and Zoomed image style to large. Click Update. 6. Next we need to add content. Content> Add Content> ImageZoom. Fill in your title and upload the image. Save. 7. Create a new view by navigating to Structure>Views>Add new view. Show Content of type ImageZoom and click create a block. Continue & edit. We need to add the content:Image under Fields. Locate the Content:Image Appears in: node: image_zoom. Apply All displays and Un-click create a label, Apply All Displays. We can also go ahead and delete the title if wanted by clicking on Content:title under Fields and Remove. Change the settings for Content:Image to: Formatter: Image Zoom Display Image Style: medium Zoomed Image Style: large
Apply All Displays.
8. Lastly, navigate to Structure>Blocks and move the View:Image zoom to the content region or where ever you would like.
Setup:
Before we begin, we need to install the Image Zoom module from the given link below:
http://drupal.org/project/imagezoom
and choose an image we would like to use.
Module Installation:
1. Copy the link address(as shown above) and go to Module> Install new module> Insert copied link address into the ‘Install from a URL’ bar> Click Install.
2. Enable Image Zoom module> Save configuration.
3. Next we need to create a new content type, view and add the content.
To create new content type navigate to Structure>Content Types>Add Content Type.
Fill in the Name and Title Field Label. Un-click 'promoted to front page' under Publishing Options, 'display author date and information' under Display Settings and set 'Default comment setting for new content' to Hidden. Save and Add Fields.
4. Now we need to add the Image field under Manage Fields.
Add new field
Label: Image
Machine Name: field_imagezoom
Field: Image
Widget: Image
On the next two screens just click on 'Save field settings/Save settings' (We don't need to change any settings).
5. You will be led back to the Manage Fields settings. Click on the Manage Display tab on the top right corner.
Select 'Image Zoom' under Image Format. To the right you will then see a button to click where you can change the image style.
It is automatically set to:
Display image style: original
Zoomed image style: original
Set your Display image style and Zoomed image style. In this example we will set Display image style to medium and Zoomed image style to large. Click Update.
6. Next we need to add content. Content> Add Content> ImageZoom.
Fill in your title and upload the image. Save.
7. Create a new view by navigating to Structure>Views>Add new view.
Show Content of type ImageZoom and click create a block. Continue & edit.
We need to add the content:Image under Fields. Locate the Content:Image Appears in: node: image_zoom. Apply All displays and Un-click create a label, Apply All Displays. We can also go ahead and delete the title if wanted by clicking on Content:title under Fields and Remove.
Change the settings for Content:Image to:
Formatter: Image Zoom
Display Image Style: medium
Zoomed Image Style: large
Apply All Displays.
8. Lastly, navigate to Structure>Blocks and move the View:Image zoom to the content region or where ever you would like.
Final Result: